<template>
  <div class="app-container">
    <bread parentPathText="系统管理" currentPathText="登录权限" />
    <div class="addItem">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        align="center"
        label="姓名"
        prop="userName"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="电话"
        prop="tel"
        :show-overflow-tooltip="true"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="性别"
        prop="sex"
        :show-overflow-tooltip="true"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="职位"
        prop="partyFlagStr"
        min-width="30%"
      />
      <el-table-column
        align="center"
        label="添加时间"
        prop="createTime"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="25%"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose"
      ref="ruleForm"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" @change="sexChange">
            <el-option
              v-for="item in sexData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属网格" prop="gridSection">
          <el-select
            v-model="ruleForm.gridSection"
            @change="getSelectList(ruleForm.gridSection, 3)"
          >
            <el-option
              v-for="item in gridData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别" prop="groupVal">
          <el-select v-model="ruleForm.groupVal" @change="popGroupValChange">
            <el-option
              v-for="item in popGroupData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="微网格名" prop="miniGrid">
          <el-select v-model="ruleForm.miniGrid">
            <el-option
              v-for="item in popMiniGridData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="ruleForm.pwd"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="repwd">
          <el-input
            v-model="ruleForm.repwd"
            type="password"
            placeholder="请确认密码"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
import initPagin from '../mixins/index.js';
export default {
  mixins:[initPagin],
  data() {
    return {
      gridData: [],
      groupData: [],
      loading: false,
      // 弹框
      title: "添加",
      dialogVisible: false,
      showHouseHolder: false,
      ruleForm: {
        name: "",
        sex: "",
        gridSection: "",
        groupVal: "",
        miniGrid: "",
        phone: "",
        pwd: "",
        repwd: "",
      },
      sexData: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        repwd: [{ required: true, message: "请确认密码", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号码",
            trigger: "change",
          },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        gridSection: [
          {
            required: true,
            message: "请选择所属网格",
            trigger: "change",
          },
        ],
        groupVal: [
          {
            required: true,
            message: "请选择组别",
            trigger: "change",
          },
        ],
        miniGrid: [
          {
            required: true,
            message: "请选择微网格名",
            trigger: "change",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
      },
      popMiniGridData: [], // 微网格名称
      popGroupData: [],
      time: new Date().getTime(),
      id: "",
    };
  },
  created() {
    this.getList();
    this.getSelectList(0, 1); // 获取微网格名、组名
  },
  methods: {
    getSelectList(parentId, type) {
      let params = {
        time: this.time,
        parentId,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.selectList, {
          time: this.time,
          parentId,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          if (type == 1) {
            this.gridData = res.data.data;
          } else if (type == 2) {
            this.groupData = res.data.data;
          } else if (type == 3) {
            this.ruleForm.groupVal = "";
            this.popGroupData = res.data.data;
            this.ruleForm.miniGrid = "";
          } else if (type == 4) {
            // 编辑
            this.popGroupData = res.data.data;
          }
        })
        .catch(() => {});
    },
    changeGrid(val) {
      this.ruleForm.gridSection = val;
    },
    getList() {
      this.loading = true;
      let params = {
        time: this.time,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        loginType: 1,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.villager.getUserList, {
          time: this.time,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          loginType: 1,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.tableList = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch(() => {});
    },
    handleUpdate(row) {
      this.dialogVisible = true;
      this.title = "编辑人员";
      this.id = row.id;
      let params = {
        time: this.time,
        id: row.id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.villager.getUserInfo, {
          time: this.time,
          id: row.id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.ruleForm.name = res.data.data.userName;
          this.ruleForm.phone = res.data.data.tel;
          this.ruleForm.sex = Number(res.data.data.sex);
          this.ruleForm.gridSection = res.data.data.grid;
          this.getSelectList(res.data.data.grid, 4);
          this.ruleForm.groupVal = res.data.data.groupId;
          this.popMiniGrid(res.data.data.groupId);
          this.ruleForm.miniGrid = res.data.data.miniGrid;
          this.ruleForm.pwd = res.data.data.pwd;
          this.ruleForm.repwd = res.data.data.pwd;
        })
        .catch(() => {});
    },
    sexChange(val) {
      this.ruleForm.sex = val;
    },
    // 删除按钮操作
    handleDelete(row) {
      let that = this;
      this.$confirm("是否确认删除?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          that.delRole(row.id);
        })
        .catch(() => {});
    },
    // 删除
    delRole(id) {
      let params = {
        time: this.time,
        loginType: 1,
        id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.deleteLoginUser, {
          time: this.time,
          id,
          loginType: 1,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.msgSuccess("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.repwd != this.ruleForm.pwd) {
            this.$message.error("密码不一致");
          } else {
            let url = "";
            let params = {
              id: this.id,
              loginType: 1,
              userName: this.ruleForm.name,
              grid:this.ruleForm.gridSection,
              tel: this.ruleForm.phone,
              groupId:this.ruleForm.groupVal,
              partyFlag: 0,
              resideFlag: 1,
              houseHolderFlag: 1,
              miniGrid: this.ruleForm.miniGrid,
              sex: this.ruleForm.sex,
              pwd: this.ruleForm.pwd,
            };
            let result = this.$md5.transferValue(params);
            if (!this.id) {
              url = this.stateUrl.villager.addUser;
            } else {
              url = this.stateUrl.villager.updateUser;
            }
            this.axios
              .post(url, {
                id: this.id,
                loginType: 1,
                userName: this.ruleForm.name,
                grid:this.ruleForm.gridSection,
                partyFlag: 0,
                resideFlag: 1,
                houseHolderFlag: 1,
                tel: this.ruleForm.phone,
                groupId:this.ruleForm.groupVal,
                miniGrid: this.ruleForm.miniGrid,
                sex: this.ruleForm.sex,
                pwd: this.ruleForm.pwd,
                sign: this.$md5.val(result),
              })
              .then((res) => {
                if (this.id) {
                  this.msgSuccess("编辑成功");
                } else {
                  this.msgSuccess("添加成功");
                }
                this.$refs[formName].resetFields();
                this.dialogVisible = false;
                this.getList();
              })
              .catch(() => {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
   // 获取小组长,微网格名称
    popGroupValChange(val) {
      this.ruleForm.miniGrid = '';
      this.popMiniGrid(val);
    },
    // 获取微网格名称
    popMiniGrid(val) {
      let params = {
        time: this.time,
        groupId: val,
        communityId: 0,
        grid: this.ruleForm.gridSection,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.miniGrid.selectList, {
          time: this.time,
          groupId: val,
          communityId: 0,
          grid: this.ruleForm.gridSection,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.popMiniGridData = res.data.data;
        })
        .catch(() => {});
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    // 添加
    handleAdd() {
      this.dialogVisible = true;
      this.id = "";
      Object.keys(this.ruleForm).forEach((key) => {
        this.ruleForm[key] = "";
      });
      this.popGroupData = [];
      this.popMiniGridData = [];
      this.title = "新增人员";
    },
  },
};
</script>
<style lang="less" scoped>
</style>